<template>
    <div class="app-container">

        <!-- <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button-group class="float-right">
                    <el-button type="primary" @click="showAll" round
                        :class="flag == '2' ? 'change' : 'notChange'">所有名单</el-button>
                    <el-button type="primary" @click="showUser" round
                        :class="flag == '1' ? 'change' : 'notChange'">用户表</el-button>
                    <el-button type="primary" @click="showDependant" round
                        :class="flag == '0' ? 'change' : 'notChange'">家属表</el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <br> -->

        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">

            <el-form-item label="旅客类型" prop="type">
                <el-select v-model="queryParams.type" placeholder="请选择旅客类型">
                    <el-option label="成人" value="0"></el-option>
                    <el-option label="儿童" value="1"></el-option>
                    <el-option label="老人" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否要床" prop="needBed">
                <el-select v-model="queryParams.needBed" placeholder="是否需要床">
                    <el-option label="不需要" value="0"></el-option>
                    <el-option label="需要" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- <div style="font-size: larger;" v-show="flag == 0">用户表</div>
        <div style="font-size: larger;" v-show="flag == 1">家属表</div>
        <div style="font-size: larger;" v-show="flag == 2">所有名单</div> -->

        <br>

        <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-download" @click="handleExport"
                v-hasPermi="['lxy:time:export']">导出</el-button>
        </el-col>

        <el-table v-loading="loading" :data="userList" :row-class-name="tableRowClassName">
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="性别" align="center" prop="gender" />
            <el-table-column label="职工号/所属职工" align="center" prop="zgh" />
            <el-table-column label="所在部门" align="center" prop="department" width="140" />
            <el-table-column label="身份证号" align="center" prop="idcard" width="140" />
            <el-table-column label="手机号" align="center" prop="phone" width="140" />
            <el-table-column label="旅客类型" align="center" prop="type">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 0">成人</span>
                    <span v-if="scope.row.type == 2">老人</span>
                    <span v-if="scope.row.type == 1">儿童</span>
                </template>
            </el-table-column>
            <el-table-column label="身高" align="center" prop="height" />
            <el-table-column label="是否需要床" align="center" prop="needBed">
                <template slot-scope="scope">
                    <span v-if="scope.row.needBed == 0">不需要</span>
                    <span v-if="scope.row.needBed == 1">需要</span>
                </template>
            </el-table-column>
            <el-table-column label="年龄" align="center" prop="age" />
            <el-table-column label="备注" align="center" prop="comment" />

        </el-table>

        <!-- <el-table v-loading="loading" :data="dependantList" v-show="flag == 1">
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="所属职工" align="center" prop="userName" />
            <el-table-column label="性别" align="center" prop="gender" />
            <el-table-column label="身份证号" align="center" prop="idcard" />
            <el-table-column label="手机号" align="center" prop="phone" />
            <el-table-column label="旅客类型" align="center" prop="type">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 0">成人</span>
                    <span v-if="scope.row.type == 2">老人</span>
                    <span v-if="scope.row.type == 1">儿童</span>
                </template>
            </el-table-column>
            <el-table-column label="身高" align="center" prop="height" />
            <el-table-column label="是否需要床" align="center" prop="needBed">
                <template slot-scope="scope">
                    <span v-if="scope.row.needBed == 0">不需要</span>
                    <span v-if="scope.row.needBed == 1">需要</span>
                </template>
            </el-table-column>
            <el-table-column label="年龄" align="center" prop="age" />
            <el-table-column label="备注" align="center" prop="comment" />
        </el-table> -->


        <!-- <br><br><br><br>
        <table id="table-1" v-show="flag == 2">
            <thead>
                <th style="width: 200px;">姓名</th>
                <th style="width: 200px;">性别</th>
                <th style="width: 200px;">职工号/家属所属职工</th>
                <th style="width: 200px;">所在部门</th>
                <th style="width: 200px;">身份证号</th>
                <th style="width: 200px;">手机号</th>
                <th style="width: 200px;">旅客类型</th>
                <th style="width: 200px;">身高</th>
                <th style="width: 200px;">是否需要床</th>
                <th style="width: 200px;">年龄</th>
                <th style="width: 200px;">备注</th>
            </thead>
            <tbody>

                //用户名单
                <tr v-for="(item, index) in userList">
                    <td>{{ item.name }}</td>
                    <td>{{ item.gender }}</td>
                    <td>{{ item.zgh }}</td>
                    <td>{{ item.department }}</td>
                    <td>{{ item.idcard }}</td>
                    <td>{{ item.phone }}</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                //家属名单
                <tr v-for="(item, index) in dependantList">
                    <td>{{ item.name }}</td>
                    <td>{{ item.gender }}</td>
                    <td>{{ item.userName }}</td>
                    <td></td>
                    <td>{{ item.idcard }}</td>
                    <td>{{ item.phone }}</td>
                    <td>
                        <span v-if="item.type == 0">成人</span>
                        <span v-if="item.type == 2">老人</span>
                        <span v-if="item.type == 1">儿童</span>
                    </td>
                    <td>{{ item.height }}</td>
                    <td>
                        <span v-if="item.needBed == 0">不需要</span>
                        <span v-if="item.needBed == 1">需要</span>
                    </td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.comment }}</td>
                </tr>

            </tbody>
        </table> -->

    </div>
</template>

<script>
import { listDependantByTimeId, cancelDependantRegistration } from "@/api/lxy/dependant";
import { listUserByTimeId } from "@/api/lxy/user";
import { delSelectUser } from "@/api/lxy/selectUser";
import { delSelectDependant } from "@/api/lxy/selectDependant";


export default {
    name: "timeFirst",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 项目表格数据
            userList: [],
            dependantList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 200,
                type: undefined,
                needBed: undefined,
            },
            form: {},

            flag: 2,

            activeIndex: '1',
            activeIndex2: '1'
        };
    },
    created() {
        this.getUserList();
        // this.getDependantList();
    },
    methods: {
        showAll() {
            this.flag = 2;
        },

        showUser() {
            this.flag = 0;
        },

        showDependant() {
            this.flag = 1;
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getDependantList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.getUserList();
        },


        getUserList() {
            this.queryParams.timeId = this.$route.query.timeId;
            this.loading = true;
            listUserByTimeId(this.queryParams.timeId, this.queryParams).then(response => {
                this.userList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },


        getDependantList() {
            this.queryParams.timeId = this.$route.query.timeId;
            this.loading = true;
            listDependantByTimeId(this.queryParams.timeId, this.queryParams).then(response => {
                this.userList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },

        cancelUserRegistration(row) {
            const id = row.id || this.ids
            this.$modal.confirm('是否确认取消该用户的报名').then(() => {
                this.loading = true;
                return delSelectUser(id, this.queryParams.timeId);
            }).then(() => {
                this.loading = false;
                this.getUserList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {
            }).finally(() => {
                this.loading = false;
            });
        },

        cancelDependantRegistration(row) {
            const id = row.id || this.ids

            this.$modal.confirm('是否确认取消该家属的报名').then(() => {
                this.loading = true;
                return delSelectDependant(id);
            }).then(() => {
                this.loading = false;
                this.getDependantList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {
            }).finally(() => {
                this.loading = false;
            });
        },

        /** 导出按钮操作 */
        handleExport() {
            this.download('lxy/user/export/' + this.queryParams.timeId, {
                ...this.queryParams
            }, `旅游名单_${new Date().getTime()}.xlsx`);

            // this.download('lxy/dependant/export/' + this.queryParams.timeId, {
            //     ...this.queryParams
            // }, `dependant_${new Date().getTime()}.xlsx`);
        },

        //表格状态颜色显示
        tableRowClassName({ row }) {
            if (row.flag == 1) {
                return 'warning-row';
            }
            return '';
        },


    }
};
</script>

<style>
.change {
    background-color: lightskyblue;
}

.notChange {
    background-color: lightskyblue;
}


/* Border styles */
#table-1 thead,
#table-1 tr {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(230, 189, 189);
}

#table-1 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(230, 189, 189);
}


/* Table Head */
#table-1 thead th {
    background-color: rgb(81, 130, 187);
    color: #fff;
    border-bottom-width: 0;
}


/* Column Style */
#table-1 td {
    color: #000;
}

/* Heading and Column Style */
#table-1 tr,
#table-1 th {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(81, 130, 187);
}


/* Padding and font style */
#table-1 td,
#table-1 th {
    padding: 5px 10px;
    font-size: 12px;
    font-family: Verdana;
    font-weight: bold;
}
</style>
